<template>
  <div>
    <h1>考生信息</h1>
    <div class="info">
      <div>
        <el-row :gutter="20">
          <el-col :span="4">
            <h3>考生省份：</h3>
            <span>{{ student.province }}</span>
          </el-col>
          <el-col :span="4">
            <h3>性别：</h3>
            <span>{{ student.sex }}</span>
          </el-col>
          <el-col :span="4">
            <h3>七选三：</h3>
            <span>{{ subjects }}</span>
          </el-col>
          <el-col :span="4">
            <h3>考生分数：</h3>
            <span>{{ student.score }}</span>
          </el-col>
          <el-col :span="4">
            <h3>考生位次：</h3>
            <span>{{ student.precedence }}</span>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="24">
            <h3>地域倾向：</h3>
            <span>{{ areas }}</span>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>最意向专业：</h3>
          <span>{{ firstMajors }}</span>
        </el-col>
        <el-col :span="12">
          <h3>有意向专业：</h3>
          <span>{{ secondMajors }}</span>
        </el-col>
        <el-col :span="12">
          <h3>不排斥专业：</h3>
          <span>{{ thirdMajors }}</span>
        </el-col>
      </el-row>
      <el-row v-if="data.sy_majors.length > 0" :gutter="20">
        <el-col>
          <h3>生涯测试：</h3>
          <span v-for="(major,index) in data.sy_majors" :key="index">{{ major.major }}({{ major.score.toFixed(1) }})、</span>
        </el-col>
      </el-row>
      <el-row v-if="data.remark">
        <h3>备注</h3>
        <div>
          {{ data.remark }}
        </div>
      </el-row>
    </div>
    <el-divider />
    <div>
      <h1>用户方案</h1>
      <el-tabs>
        <el-tab-pane label="平衡">
          <Solution
            :data="balance"
            :type="1"
            :scores="data.academyScores"
            :user="{
              level: data.result.user.level,
              division: data.result.user.division,
              province: data.result.user.province,
            }"
          />
        </el-tab-pane>
        <el-tab-pane label="院校优先">
          <Solution
            :data="academyResult"
            :type="2"
            :scores="data.academyScores"
            :user="{
              level: data.result.user.level,
              division: data.result.user.division,
              province: data.result.user.province,
            }"
          />
        </el-tab-pane>
        <el-tab-pane label="专业优先">
          <Solution
            :data="majorResult"
            :type="3"
            :scores="data.academyScores"
            :user="{
              level: data.result.user.level,
              division: data.result.user.division,
              province: data.result.user.province,
            }"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Result',
  components: {
    Solution: () => import('./components/Solution')
  },
  props: {
    data: {
      type: [Object],
      required: true
    }
  },
  data() {
    return {

    }
  },
  computed: {
    student() {
      return this.data.result.user
    },
    areas() {
      console.log('area', this.data)
      return this.test(this.data)
    },
    excludeAreas() {
      return this.data.predilection ? (this.data.predilection.exclude_area instanceof Array ? this.data.predilection.exclude_area.join('、') : this.data.predilection.exclude_area) : ''
    },
    intentionCollege() {
      return this.data.intention_colleges.join('、')
    },
    intentionMajor() {
      return this.data.intention_majors.join('、')
    },
    firstMajors() {
      return this.data.intention_major_firsts.join('、')
    },
    secondMajors() {
      return this.data.intention_major_seconds.join('、')
    },
    subjects() {
      return this.data.subjects.join('、')
    },
    thirdMajors() {
      return this.data.intention_major_thirds.join('、')
    },
    excludeCollege() {
      return this.data.exclude_colleges.join('、')
    },
    balance() {
      return this.data.result.balance
    },
    academyResult() {
      return this.data.result.academy
    },
    majorResult() {
      return this.data.result.major
    }
  },
  methods: {
    test(p) {
      return p ? p.predilection.area : ''
    }
  }
}
</script>

<style scoped>
div.info {
  border-radius: 2px;
  margin-bottom: 10px;
}
</style>
